<script setup>
import { ref, onMounted, computed } from 'vue';
import { Card, Cell, CellGroup, Tab, Tabs, Icon, Empty, Search } from 'vant';
import { ElStatistic, ElTag } from 'element-plus';
import axios from "@/utils/axios.js"
import {useUserStore} from "@/stores/user.js";

const users = useUserStore().user
// 模拟数据
//const currentPoints = ref(1280);
const loading = ref(false);
const activeTab = ref('all');
const searchValue = ref('');

const pointsRecords = ref([
  {
    transactionId: 1,
    prePoints: 1200,
    transactionType: '1',
    description: '每日签到奖励',
    postPoints: 1250,
    createdAt: '2023-08-15 08:30:45'
  },
  {
    transactionId: 2,
    prePoints: 1250,
    transactionType: '-1',
    description: '兑换商品【智能水杯】',
    postPoints: 800,
    createdAt: '2023-08-14 14:15:22'
  },
  {
    transactionId: 3,
    prePoints: 800,
    transactionType: '1',
    description: '邀请好友奖励',
    postPoints: 1000,
    createdAt: '2023-08-12 10:05:33'
  },
  {
    transactionId: 4,
    prePoints: 1000,
    transactionType: '1',
    description: '购物返积分',
    postPoints: 1200,
    createdAt: '2023-08-10 18:45:12'
  },
  {
    transactionId: 5,
    prePoints: 1200,
    transactionType: '-1',
    description: '兑换商品【无线耳机】',
    postPoints: 500,
    createdAt: '2023-08-08 09:30:45'
  },
]);

// 过滤记录
const filteredRecords = computed(() => {
  let records = pointsRecords.value;

  // 按标签过滤
  if (activeTab.value === 'income') {
    records = records.filter(item => item.transactionType === '1');
  } else if (activeTab.value === 'expense') {
    records = records.filter(item => item.transactionType === '-1');
  }

  // 按搜索关键词过滤
  if (searchValue.value) {
    const keyword = searchValue.value.toLowerCase();
    records = records.filter(item =>
        item.description.toLowerCase().includes(keyword) ||
        item.createdAt.toLowerCase().includes(keyword)
    );
  }

  return records;
});

// 计算累计数据
const totalStats = computed(() => {
  return pointsRecords.value.reduce((acc, record) => {
    if (record.transactionType === '1') {
      acc.income += record.postPoints - record.prePoints;
    } else {
      acc.expense += record.prePoints - record.postPoints;
    }
    return acc;
  }, { income: 0, expense: 0 });
});
const us = JSON.parse(sessionStorage.getItem("user"));
// 模拟获取数据
const fetchPointsData = () => {
  loading.value = true;
  axios.get(`/api/pointsTransactions/getPointsTransactionsById/${us.userId}`)
      .then(response => {
        //pointsRecords.value = response.data;
      })
  setTimeout(() => {
    loading.value = false;
  }, 800);
};

onMounted(() => {
  fetchPointsData();
});
</script>

<template>
  <!-- 导航栏 -->
  <van-nav-bar
      title="积分详情"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
      safe-area-inset-top
  />
  <div style="height: 46px;"></div>
  <div class="points-container">
    <!-- 顶部积分概览 -->
    <div class="points-overview">
      <div class="points-balance">
        <div class="balance-label">当前积分:</div>
        <div class="balance-value">{{ pointsRecords.points }}</div>
      </div>
    </div>

    <!-- 搜索框 -->
    <van-Search
        v-model="searchValue"
        placeholder="搜索积分记录"
        shape="round"
        background="#f5f5f5"
        class="points-search"
    />

    <!-- 积分记录 -->
    <div class="points-records">
      <van-Tabs v-model:active="activeTab">
        <van-Tab title="全部记录" name="all"></van-Tab>
        <van-Tab title="收入记录" name="income"></van-Tab>
        <van-Tab title="支出记录" name="expense"></van-Tab>
      </van-Tabs>

      <div v-if="loading" class="loading-wrapper">
        <Icon name="loading" size="24px" class="loading-icon" />
        <span>加载中...</span>
      </div>

      <Empty v-else-if="filteredRecords.length === 0"  class="empty-wrapper">
        <template >
          <Icon name="points" size="60px" color="#EBEDF0" />
        </template>
      </Empty>

      <CellGroup v-else class="record-list">
        <Cell
            v-for="record in filteredRecords"
            :key="record.transactionId"
            class="record-item"
        >
          <template #icon>
            <div class="record-icon" :class="record.transactionType === '1' ? 'income' : 'expense'">
              <Icon :name="record.transactionType === '1' ? 'plus' : 'minus'" size="16px" />
            </div>
          </template>
          <template #title>
            <div class="record-title">{{ record.description }}</div>
            <div class="record-time">{{ record.createdAt }}</div>
          </template>
          <template #label>
            <div class="record-points">
              <span>变动前: {{ record.prePoints }}</span>
              <span>变动后: {{ record.postPoints }}</span>
            </div>
          </template>
          <template #extra>
            <ElTag :type="record.transactionType === '1' ? 'success' : 'danger'" size="small">
              {{ record.transactionType === '1' ? '+' : '-' }}{{ Math.abs(record.postPoints - record.prePoints) }}
            </ElTag>
          </template>
        </Cell>
      </CellGroup>
    </div>
  </div>
</template>

<style scoped>
.points-tabs {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
}

:deep(.van-tabs__wrap) {
  border-bottom: 1px solid #f5f5f5;
  display: flex;
}

:deep(.van-tabs__nav) {
  flex: 1;
  display: flex;
}

:deep(.van-tab) {
  flex: 1;
  font-size: 14px;
  padding: 12px 0;
  text-align: center;
}

:deep(.van-tab--active) {
  color: #ff9500;
  font-weight: 500;
}

:deep(.van-tabs__line) {
  background-color: #ff9500;
  height: 3px;
  bottom: 15px;
}
.points-container {
  padding: 16px;
  background-color: #f7f8fa;
  min-height: 100vh;
}

.points-overview {
  display: flex;
  background: linear-gradient(135deg, #ff9500, #ff7a00);
  border-radius: 12px;
  padding: 16px;
  color: white;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(255, 157, 0, 0.2);
}

.points-balance {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.balance-label {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 4px;
}

.balance-value {
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
}

.balance-unit {
  font-size: 12px;
  opacity: 0.8;
}

.points-stats {
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  opacity: 0.8;
}

.points-search {
  margin-bottom: 16px;
  background: transparent;
  padding: 0;
}

:deep(.van-search__content) {
  background-color: #fff !important;
}

.points-records {
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.points-tabs {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #fff;
}

:deep(.van-tabs__wrap) {
  border-bottom: 1px solid #f5f5f5;
}

:deep(.van-tab) {
  font-size: 14px;
  padding: 12px 0;
}

:deep(.van-tab--active) {
  color: #ff9500;
  font-weight: 500;
}

:deep(.van-tabs__line) {
  background-color: #ff9500;
  height: 3px;
}

.loading-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.loading-icon {
  animation: rotate 1s linear infinite;
  margin-bottom: 8px;
}

.empty-wrapper {
  padding: 40px 0;
}

.record-list {
  --van-cell-border-color: #f5f5f5;
}

.record-item {
  padding: 12px 16px;
}

.record-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.record-icon.income {
  background-color: rgba(25, 137, 250, 0.1);
  color: #1989fa;
}

.record-icon.expense {
  background-color: rgba(255, 68, 68, 0.1);
  color: #ff4444;
}

.record-title {
  font-size: 15px;
  color: #333;
  margin-bottom: 4px;
}

.record-time {
  font-size: 12px;
  color: #999;
}

.record-points {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>